<template>
  <div class="c-martin__auth">
    <div class="c-martin__edit__button">
      <martin-button type="primary" size="small" @click="editUser">编辑</martin-button>
    </div>
    <div class="c-martin__table">
      <Table highlight-row ref="currentRowTable" :columns="tableProp" :data="tableData" @on-selection-change="selectChange" :loading="loading"></Table>
    </div>
    <div class="c-martin__pagenation">
      <martin-pagenation :page-count="pageCount" :current-page.sync="curPage" @changePage="changePage"/>
    </div>
    <Modal
        v-model="visiable"
        title="编辑"
        @on-ok="saveEdit"
        @on-cancel="resetData">
        <RadioGroup v-model="roleId">
          <Radio class="c-martin__manage" :label="1">管理员</Radio>
          <Radio class="c-martin__manage" :label="2">博主</Radio>
          <Radio class="c-martin__manage" :label="3">游客</Radio>
        </RadioGroup>
    </Modal>
  </div>
</template>

<script>
import Pagenation from '@/components/Pagenation/Pagenation'
import Table from '@/components/Table/Table'

export default {
  name: 'MartinAuth',
  components: {
    'martin-pagenation': Pagenation,
    'martin-table': Table,
  },
  data() {
    return {
      loading: false,
      visiable: false,
      curPage: 1,
      tableData: [],
      pageCount: 1,
      userId: '',
      roleId: 0,
      tableProp: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '用户名',
          key: 'username'
        },
        {
          title: '姓名',
          key: 'nickname'
        },
        {
          title: '头像',
          key: 'url',
          render(h, params) {
            return h(
              'div',
              {
                attrs: {
                  className: 'c-martin__table__column'
                },
                domProps: {
                  innerHTML: params.row.url
                }
              }
            )
          }
        },
        {
          title: '个人简介',
          key: 'instroce',
          render(h, params) {
            return h(
              'div',
              {
                domProps: {
                  innerHTML: params.row.instroce
                }
              }
            )
          }
        },
        {
          title: '操作',
          key: 'option',
          render: (h, params) => {
            return h(
              'div', [
                h('MartinButton', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      const vm = new Vue()
                      vm.$http.delete('/users', {
                        params: {
                          username: params.row.username
                        }
                      }).then(({data, status}) => {
                        if (status === 200) {
                          vm.$message.success('删除成功')
                          this.getAuth()
                        }
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                  }
                }, '删除')
              ]
            )
          }
        }
      ]
    }
  },
  mounted() {
    this.getAuth()
  },
  methods: {
    selectChange(e) {
      if (e.length) {
        this.roleId = e[0].roleId
        this.userId = e[0].username
      } else {
        this.roleId = 0
        this.userId = ''
      }
    },
    saveEdit() {
      this.$http.post('/users', {
        username: this.userId,
        roleId: +this.roleId
      }).then(({data, status}) => {
        if (status === 200) {
          this.$message.success('编辑成功')
          this.getAuth()
          this.visiable = false
        } else this.$message.error(data.message)
      }).catch(err => {
        console.log(err)
      }).finally(v => {
        this.resetData()
      })
    },
    resetData() {
      this.$refs.currentRowTable.selectAll(false)
      this.roleId = 0
    },
    editUser() {
      if (this.roleId) {
        this.visiable = true
      } else return void this.$message.error('请先选择用户')
    },
    changePage(page) {
      this.curPage = page
      this.getAuth()
    },
    getAuth({curPage = this.curPage} = {}) {
      this.loading = true
      this.$http.get('/users', {
        params: {
          curPage,
          pageSize: 8
        }
      }).then(({data, status}) => {
        if (status === 200) {
          this.tableData = data.items.map(val => {
            return {
              ...val,
              url: `<a href="${val.url}" target="_blank"><img class="c-martin__table__head" src=${val.url}></a>`
            }
          })
          this.pageCount = data.page.total || 1
        }
      }).catch(err => {
        console.log(err)
      }).finally(v => {
        const timer = setTimeout(val => {
          clearTimeout(timer)
          this.loading = false
        }, 500)
      })
    }
  }
}
</script>

<style scoped>
.c-martin__edit__button {
  width: 90%;
  margin: 0 auto 20px;
}
.c-martin__table {
  max-width: 90%;
  margin: 0 auto;
}
.c-martin__auth {
  height: 100%;
}
.c-martin__table {
  min-height: 70%;
}
</style>

<style>
.c-martin__manage {
  margin-right: 20px;
}
.c-martin__table .c-martin__button {
  margin-right: 20px;
}
.c-martin__edit {
  margin-left: 20px;
}
.c-martin__table__head {
  width: 45px;
  height: 35px;
  border-radius: 4px;
}
</style>
